{extend name="main"}
{block name="body"}
<div class="bg-white mb-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right" class="flex py-3">
	  <el-form-item label="状态" prop="status" class="flex mb-0 pl-3">
	  	<el-select v-model="search.status" placeholder="请选择" class="w-100px">
		    <el-option label="全部"value="all"></el-option>
		    <el-option label="上架":value="1"></el-option>
		    <el-option label="下架":value="0"></el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item label="套餐" prop="vip" class="flex mb-0 pl-3">
	  	<el-select v-model="search.vip" placeholder="请选择" class="w-100px">
		    <el-option key="all"label="全部"value="all"></el-option>
		    <el-option v-for="v in vip" :key="v.level":label="v.title":value="v.level"></el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item label="名称" prop="title" class="flex mb-0 pl-3">
	    <el-input v-model="search.title" placeholder="请输入你想搜索的关键词"></el-input>
	  </el-form-item>

	  <el-form-item class="flex mb-0 pl-3">
	    <el-button type="primary" @click="initHtml">查询</el-button>
	    <el-button @click="resetForm('search')">重置</el-button>
	    <el-button
            type="success"
            @click="window.open('/vip/poster/add')">
            添加海报
        </el-button>
	  </el-form-item>
	</el-form>
</div>
<div class="bg-white p-3">
	<div class="row">
		<div class="col-2 mb-3" v-for="(v,index) in tableData">
			<div class="border position-relative">
				<el-image
			    style="width: 100%; height: 260px;cursor: pointer;"
			    :src="v.path"
			    fit="cover"
				:preview-src-list="path"></el-image>
			    <div class="bg-light text-center py-2 small">
			      	<span v-if="v.is_company">企业</span>
			      	<span v-else>职位</span>
			      	{{v.title}}{{v.vip_name}}
			    </div>
			    <div class="text-center py-2">
			      	<transition>
			      		<el-button type="success" size="minism"
			            plain
			            round
			      		v-if="v.status==1 || v.status==2" 
			      		@click="setLinksStatus(v);" 
			      		:loading="v.status==2">上架</el-button>
			      		<el-button type="info" size="minism"
			            plain
			            round 
			      		v-else="v.status==0 || v.status==2" 
			      		@click="setLinksStatus(v);" 
			      		:loading="v.status==2">下架</el-button>
					</transition>
			        <el-button
			            type="primary"
			            plain
			            round
			            size="minism"
			            @click="window.open('/vip/poster/edit/'+v.id)">
			            编辑
			        </el-button>
			        <el-button
			            type="danger"
			            plain
			            round
			            size="minism"
			            @click="delLinks(v,scope.$index)">
			            删除
			        </el-button>
			    </div>
		    </div>
		</div>
	</div>
	<div class="table-responsive py-3 text-center">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[12,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="vip"}
	var vip=[];
	{else/}
	var vip={:json_encode($vip,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			vip:vip,
			labelPosition:'right',
			path:[],
			search:{
				title:'',
				status:'all',
				vip:'all',
				ajax:false,
				page:1,
				total:0,
				pageSize:12
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
	    	setLinksStatus(data){
	    		if (data.status==2) return;
	    		var status=1,oldStatus=data.status;
	    		if (data.status) status=0;
	    		data.status=2;
	    		$.getJSON('/vip/poster/setStatus/'+data.id+'/'+status,function(ret){
	    			data.status=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.status=status;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
			delLinks(data,index) {
	      		var _this=this;
		        this.$confirm('是否确定删除【'+data.title+'】的友情链接吗?', '提示', {
		          confirmButtonText: '删除',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/vip/poster/del/'+data.id,function(ret){
		    			loading.close();
		    			if (ret) {
		    				if (ret.code === 0) {
		    					_this.tableData.splice(index,1);
		    				}else XYBase.msg(ret.msg);
		    			}else XYBase.error(XYBase.config.system_network_error);
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
	      	initHtml() {
	      		var _this=this;
	      		_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
								for (var i = 0; i < ret.data.data.length; i++) {
									_this.path.push(ret.data.data[i].path);
								}
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{/block}